<template>
  <div>{{ title }}111</div>
  <div>{{ name }}333</div>
  <div>{{ obj.user }}222</div>
  <div ref="cc">{{ vc }}lala</div>
  {{cv}}
  <button @click="click">点击</button>
</template>

<script>
import {toRef, toRefs, isRef,inject, defineComponent, reactive, ref, watch, computed} from "vue";
export default defineComponent({
  name: "Head",
  props: ['title'],
  methods: {
    click() {
      this.$emit('check', this.title)
    }
  },
  setup(props) {
    console.log(props)
    let obj = reactive({
      user: '晓风残月'
    })
    let name = toRef(obj,'user')
    let click = ()=>{
      obj.user = (Math.random()*100).toFixed(2) + '晓风残月'
      name = (Math.random()*100).toFixed(2) + '晓风残月'
    }
    let cc = ref(null)
    console.log(cc.value)
    let vc = computed({
      get:()=> obj.user,
      set: val=>{
        console.log(val)
        obj.user = obj.user
      }
    })

    watch(name,(count)=> {
      console.log(count)
    })
    watch(
        () => obj.user,
        (count, prevCount) => {
          console.log(count)
          /* ... */
        }
    )
    let cv = inject('geolocation')
    console.log(cv)
    return {
      ...toRefs(props),
      obj,
      name,
      vc,
      cc,
      cv,
      click
    }
  }
})
</script>

<style scoped>

</style>